<template>
  <div :class="['sidebar-container', app.getPages.showLogo ? 'has-logo' : '']">
    <Logo
      v-if="app.getPages.showLogo"
      :collapse="app.getSidebar.opened"
      :title="setting.getTitle"
    />
    <el-scrollbar
      wrap-class="scrollbar-wrapper"
      :class="[app.isMobile ? 'mobile' : 'pc']"
    >
      <el-menu
        unique-opened
        mode="vertical"
        class="select-none outer-most"
        :default-active="active?.id"
        :collapse="!app.getSidebar.opened"
        :collapse-transition="false"
      >
        <Item
          v-for="menu in menuData"
          :key="menu.id"
          :item="menu"
          class="select-none outer-most"
        />
      </el-menu>
    </el-scrollbar>
    <leftCollapse
      v-if="!app.isMobile"
      :is-active="app.getSidebar.opened"
      @toggleClick="app.toggleSideBar"
    />
  </div>
</template>
<script setup lang="ts">
import Logo from "./logo.vue";
import Item from "../item/item.vue";
import leftCollapse from "./leftCollapse.vue";
import { useAppHooks } from "@/core/pinia/store/app.store";
import { useSettingHooks } from "@/core/pinia/store/setting.store";
import { useMenuHooks } from "@/core/pinia/store/menu.store";
import { computed } from "vue";
const menuHooks = useMenuHooks();
const app = useAppHooks();
const menuData = computed(() => {
  const isOk = app.isMix && !app.isMobile;
  return isOk
    ? menuHooks.getParentMenuById(menuHooks.getActiveHorizontal?.id)
    : menuHooks.menus;
});
const active = computed(() => {
  return menuHooks.getDefaultActive;
});
const setting = useSettingHooks();
</script>

<style scoped>
:deep(.el-loading-mask) {
  opacity: 0.45;
}
</style>
